<template>
  <div style="display: flex;align-items: center;margin-left: 20px">
    <p style="padding: 5px;display: inline-block;font-size: 16px;color:#666" v-if="title">{{ props.title }}</p>
    <div class="text_bottom">
      <div class="text_bottom_p" v-for="(item,index) in dataLsit" :key="item.key" :class="item.name==name?'active':''"
           @click="isactive(item,index)">
        <!--        {{ item }}-->
        {{ item.name }}
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref, watch} from "vue";


const props = defineProps({
  dataLsit: {
    required: true
  },
  title: {
    required: false
  },
  fristname: {
    default: '全部',
    required: false
  }
})
const name = ref('全部')
name.value = props?.fristname
watch(() => props.fristname, (v) => {
  name.value = v
})

// console.log(props?.fristname,name.value,'name.value')
// const dataValue = ref([])
// dataValue.value = props?.dataValue
// console.log(dataValue.value, 'dataValue.value')
// watch(()=>props.fristname, (newvalue, oldvalue) => {
//   name.value=newvalue
//   // dataValue.value = newvalue
// },{deep: true})

const emit = defineEmits(['clickEvent'])
const isactive = (item, index) => {
  name.value = item.name;
  emit('clickEvent', item)
}
</script>

<style scoped lang="scss">
.text_bottom {
  display: flex;

  .text_bottom_p {
    padding: 10px;
    margin: 0 5px;
    cursor: pointer;
  }

  .active {
    background: #FDF5F5;
    color: red;
  }
}
</style>